<script setup>
    import {
    Plus,
    Delete,
    Edit,
    Message,
    Search,
    Star,
    } from '@element-plus/icons-vue'
import { ref } from 'vue';
    const questionCategory = ref();
    const questionDifficulty = ref();
    const knowledgePoint = ref();
    const category = ref([
        {id:'01',name:'语文',categoryState:'未开课',courseTime:'2022-01-01 13:00:00'},
        {id:'02',name:'数学',categoryState:'进行中',courseTime:'2022-01-02 13:00:00'},
        {id:'03',name:'英语',categoryState:'已结束',courseTime:'2022-01-03 13:00:00'}
    ])
</script>
<template>
    <el-card class="page-container">
        <div style="display: flex;justify-content: space-between;">
            <div>
                <el-button type="primary" :icon="Plus">添加</el-button>
                <el-select v-model="questionCategory" placeholder="题目类别" style="width: 115px">
                    <el-option label="语文" value="1" />
                    <el-option label="数学" value="2" />
                    <el-option label="英语" value="3" />
                </el-select>
                <el-select v-model="questionDifficulty" placeholder="题目难度" style="width: 115px">
                    <el-option label="低" value="1" />
                    <el-option label="中" value="2" />
                    <el-option label="难" value="3" />
                </el-select>
                <el-select v-model="knowledgePoint" placeholder="知识点" style="width: 115px">
                    <el-option label="进行中" value="1" />
                    <el-option label="未开课" value="2" />
                    <el-option label="已结束" value="3" />
                </el-select>
            </div>
            <div>
                <el-input v-model="name" placeholder="请输入目录名称" style="width: 120px;"></el-input>
            <el-button type="primary" width="100%" :icon="Search">搜索</el-button>
            </div>   
        </div>
        <div class="example-pagination-block" >
            <div class="example-demonstration" >
            <el-table style="width: 100%;"  :data="category">
                <el-table-column label="序号" width="100%" type="index" prop="id"></el-table-column>
                <el-table-column label="目录名称"  prop="name"></el-table-column>
                <el-table-column label="开课状态"  prop="categoryState"></el-table-column>
                    
                <el-table-column label="开课时间"  prop="courseTime"></el-table-column>
                <el-table-column label="操作" width="100%">
                    <template #default="{row}">
                        <el-button :icon="Edit" type="primary" circle plain @click="showDialog(row)"></el-button>
                        <el-button :icon="Search" type="success" circle plain ></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
            <el-pagination background layout="prev, pager, next" :total="1000" style="display: flex;justify-content: space-between;align-items: center; position: bottom;margin-top: 10px;" />
        </div>
    </el-card>
</template>
<style scoped lang="scss">
    .page-container{
        min-height: 100%;
        box-sizing: border-box;
    }
</style>